<template>
  <div id="container-about"></div>
</template>
  
  <script setup>
import { onMounted } from "vue";
import {
  Graph,
  treeToGraphData,
  register,
  ExtensionCategory,
  GraphEvent,
} from "@antv/g6";
// import data from "../data/tree2.json";
import data from "../data/tree.json";
console.log(data,'==data')
import TreeNode from "./js/treeCom.js";
register(ExtensionCategory.NODE, "tree-node", TreeNode);
onMounted(() => {
  const graph = new Graph({
    container: "container-about",
    autoFit: "view",
    data: treeToGraphData(data),
    width: 1500,
    height: 800,
    zoom: 0.5,
    background:'#EFF4FF',
    node: {
      type: "tree-node",
      style: {
        size: [100, 100],
        fill: "#EFF4FF",
        lineWidth: 1,
        stroke: "#5F95FF",
        ports: [
          {
            placement: "bottom",
          },
          {
            placement: "top",
          },
        ],
      },
    },
    edge: {
      type: "polyline",
      style: {
        router: {
          type: "orth",
        },
        stroke: "#C0C0C0",
      },
      animation: {
        enter: false,
      },
    },
    layout: {
      type: "dagre",
      direction: "TB",
      nodeSep: 100, // 节点之间间距
      rankSep: 100, // 每个层级之间的间
    },
    plugins: [
      {
        type: "tooltip",
        trigger: "click",
        getContent: (e, items) => {
          let result = `<h4>Custom Content</h4>`;
          items.forEach(() => {
            result += `<p>Type: 123</p>`;
          });
          return result;
        },
      },
    ],
    behaviors: [{
      type:"drag-canvas",
      key: 'drag-canvas',
      range:2
    }, "zoom-canvas"],
  });
  graph.once(GraphEvent.AFTER_RENDER, () => {
    graph.fitView();
  });
  graph.render();
});
</script>
<style scoped>

</style>
  